<template>
  <div class="banner-box">
    <el-carousel indicator-position="inside" height="1080px" arrow="never" :autoplay="true" interval="5000">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.url" alt="Banner" style="width: 100%; height: 100%;" />

        <div v-if="index === 1" class="banner-container">
          <div class="banner-content">
            <div class="banner-left">
              <div style="width: 100%;display:flex;">
                <h1 class="title">零付</h1>
              </div>
              <div class="text">技术驱动灵活就业匹配&nbsp;&nbsp;&nbsp; 服务零散就业人员</div>
              <div class="text2-box">
                <div class="text2-box-content">
                  <p class="circel"></p>
                  <p class="text2">先行先付</p>
                </div>
                <div class="text2-box-content">
                  <p class="circel"></p>
                  <p class="text2">托底保障</p>
                </div>
                <div class="text2-box-content">
                  <p class="circel"></p>
                  <p class="text2">透明消费</p>
                </div>
              </div>
            </div>
            <!-- 内部轮播图 -->
            <el-carousel arrow="never" :autoplay="true" interval="5000" indicator-position="none"
              :pause-on-hover="false" type="card" class="inner-carousel" cardScale="0.7">
              <el-carousel-item v-for="(innerItem, innerIndex) in innerBanners" :key="innerIndex">
                <img :src="innerItem.url" style="width: 100%; height: 100%; " />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-carousel-item>
      <template #indicator="{ active, index }">
        <div class="custom-indicator" :class="{ 'is-active': active }">{{ index + 1 }}</div>
      </template>
    </el-carousel>
  </div>
</template>

<script setup>
const banners = [
  { url: new URL('@/assets/banner.png', import.meta.url).href },
  { url: new URL('@/assets/banner2bg.png', import.meta.url).href },
];

// 内部轮播图的图片数据，需确保图片与设计图手机界面一致
const innerBanners = [
  { url: new URL('@/assets/banner-home.png', import.meta.url).href },
  { url: new URL('@/assets/banner-jiaoliu.png', import.meta.url).href },
  { url: new URL('@/assets/banner-yuying.png', import.meta.url).href },
];
</script>

<style scoped lang="scss">
.banner-box {
  width: 100%;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
}

.el-carousel__item h3 {
  display: none;
}

::v-deep .el-carousel__indicator.is-active button {
  background: #ffffff;
  width: 44px;
  height: 13px;
  border-radius: 7px;
}

::v-deep .el-carousel__button {
  width: 13px;
  height: 13px;
  background: #ffffff;
  opacity: 0.7;
  border-radius: 100%;
}

/* 轮播图文字样式 */
.banner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .banner-content {
    display: flex;
    width: 80%;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;

    .banner-left {
      height: 200px;
      margin-left: 157px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 60px;
        color: #000;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .text {
        font-size: 30px;
        color: #000000;
        font-weight: 400;
      }

      .text2-box {
        display: flex;
        width: 580px;
        justify-content: space-between;

        .text2-box-content {
          display: flex;
          align-items: center;
          width: 150px;
          justify-content: space-between;

          .circel {
            width: 14px;
            height: 14px;
            background: #0049d0;
            border-radius: 100%;
          }

          .text2 {
            color: #0049D0;
            font-size: 30px;
            font-weight: 400;
          }
        }
      }
    }
  }
}

/* 子轮播图样式调整 */
.inner-carousel {
  width: 720px !important;
  height: 812px !important;
  // margin-left: 20px; 

  ::v-deep .el-carousel__container {
    height: 100%;
  }

  ::v-deep .el-carousel__item {
    // width: 350px !important; /* 修改为350px */
    // height: 729px !important; /* 添加高度设置 */
    // margin: 0 15px; 
    transform-style: preserve-3d;
    backface-visibility: hidden;
    z-index: calc(var(--active-index, 0) + 1);

    &:not(.is-active) {
      opacity: 0.4;
      z-index: 1;
      transform: scale(0.9);
    }

    &.is-active {
      z-index: 3;
    }
  }

  ::v-deep .el-carousel__indicators,
  ::v-deep .el-carousel__arrow {
    display: none;
  }
}

::v-deep .el-carousel__item {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .el-carousel--card {
  perspective: 800px;

  .el-carousel__item {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    z-index: calc(var(--active-index, 0) + 1);

    &:not(.is-active) {
      opacity: 0.9;
      z-index: 1;
    }

    &.is-active {
      z-index: 3;
    }
  }
}

::v-deep .el-carousel__mask {
  opacity: 0 !important;
}

// 调整外部轮播图高度
.el-carousel {

  .el-carousel-item {
    height: 1080px !important;
  }
}

::v-deep .el-carousel--card .el-carousel__item:not(.is-active) {
  opacity: 0.5 !important;
}
</style>